<header class="page-header">
  <nav class="breadcrumb">
    <ul>
      <li>
        <span class="sep">&#x0002f;</span>
        <a href={{href-to "vault.cluster.secrets.backend" backend.id}}>
          ssh
        </a>
      </li>
      <li class="is-active">
        <span class="sep">&#x0002f;</span>
        <a href={{href-to "vault.cluster.secrets.backend" backend.id}}>
          sign
        </a>
      </li>
      <li>
        <span class="sep">&#x0002f;</span>
        <a href={{href-to "vault.cluster.secrets.backend.show" model.role.name}}>
          {{model.role.name}}
        </a>
      </li>
    </ul>
  </nav>
  <div class="level">
    <div class="level-left">
      <h1 class="title is-3 ">
        Sign SSH Key
      </h1>
    </div>
  </div>
</header>

{{#if model.signedKey}}
  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
    {{#message-in-page type="warning" data-test-warning=true}}
      You will not be able to access this information later, so please copy the information below.
    {{/message-in-page}}
    {{#each model.attrs as |attr|}}
      {{#if (eq attr.type "object")}}
        {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(stringify (get model attr.name))}}
      {{else}}
        {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}}
      {{/if}}
    {{/each}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      {{#copy-button
        clipboardText=model.signedKey
        class="button is-primary"
        buttonType="button"
        success=(action (set-flash-message "Key copied!"))
      }}
        Copy Key
      {{/copy-button}}
    </div>
    {{#if model.leaseId}}
      <div class="control">
        {{#copy-button
          clipboardText=model.leaseId
          class="button"
          buttonType="button"
          success=(action (set-flash-message "Lease ID copied!"))
        }}
          Copy Lease ID
        {{/copy-button}}
      </div>
    {{/if}}
    <div class="control">
      <button
         type="button"
         {{action "newModel"}}
         class="button"
         data-test-secret-generate-back=true
        >
        Back
      </button>
    </div>
  </div>
{{else}}
  <form {{action "sign" on="submit"}} data-test-secret-generate-form="true">
    <div class="box is-sideless is-fullwidth is-marginless">
      {{message-error model=model}}
      {{#each (take 1 model.attrs) as |attr|}}
        {{partial "partials/form-field-from-model"}}
      {{/each}}
      {{toggle-button
        toggleAttr="showOptions"
        toggleTarget=this
        openLabel="Hide options"
        closedLabel="More options"
      }}
      {{#if showOptions}}
        <div class="box is-marginless">
          {{#each (drop 1 model.attrs) as |attr|}}
            {{partial "partials/form-field-from-model"}}
          {{/each}}
        </div>
      {{/if}}
    </div>
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
          type="submit"
          disabled={{loading}}
          class="button is-primary {{if loading 'is-loading'}}"
          data-test-secret-generate=true
        >
          Sign
        </button>
      </div>
      <div class="control">
        {{#link-to
          "vault.cluster.secrets.backend.list-root"
          backend.id
          class="button"
          data-test-secret-generate-cancel=true
        }}
          Cancel
        {{/link-to}}
      </div>
    </div>
  </form>
{{/if}}
